<template>
    <div class="user-login" v-show="value">
        <div class="mask"></div>
        <div class="body column center">
            <div class="icon" @click="close">
                <img :src="require('@/assets/icon/close_light.png')" />
            </div>
            <div class="header">绑定手机号</div>
            <div class="des">即可领取5元新人优惠卷</div>
            <WfInputField
                v-model="telephone"
                class="field"
                :option="telephoneInput"
            />
            <div class="btn-confirm" @click="confirm">确定</div>
        </div>
    </div>
</template>

<script>
import WfInputField from "@/components/common/wf-input-field/index";
import validator from "@/utils/validator";
export default {
    components: {
        WfInputField
    },
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            telephoneInput: {
                type: "number",
                label: "手机号",
                placeholder: "请输入本人手机号",
                maxlength: "11"
            },
            telephone: ""
        };
    },

    methods: {
        close() {
            this.$emit("input", false);
        },
        confirm() {
            const isRight = validator.telephone(this.telephone);
            if (isRight) {
                this.$emit("confirm", {
                    telephone: this.telephone
                });
                this.close();
            } else {
                this.$showToast({ title: "手机号格式不正确" });
            }
        }
    }
};
</script>


<style lang="less" scoped>
.user-login {
    position: fixed;
    z-index: 2021;
    background: #fff;

    .body {
        align-items: center;
        color: #4e4e4e;
        background: #fff;
        z-index: 2022;
        padding: 40px;
        border-radius: 15px;

        .icon {
            position: absolute;
            left: 0;
            top: -20px;
            transform: translateY(-100%);
            width: 60px;
        }

        .header {
            font-size: 32px;
            font-weight: 600;
            padding: 20px 0 20px 0;
        }

        .des {
            color: #f40;
            padding: 0 0 40px 0;
        }

        .field {
            margin-bottom: 15px;
        }

        .btn-confirm {
            background: #f40;
            color: #fff;
            padding: 20px 100px;
            margin-top: 30px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 32px;
        }
    }
}
</style>